<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :lg="24" >
            <el-card class="box-card" >
                <div>
                    <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 10px; border-radius: 0px;" onclick="location='addquestion.html'">添加试题</el-button>
                </div>
            </el-card>
        </el-col>
    </el-row>

    <el-row>
            <el-card class="box-card" >
               <!-- 上部条件选项框 start-->
                <el-row>
                    <el-col :lg="18">
                        <label>题型</label>
                        <template>
                            <el-select v-model="typeValue" placeholder="请选择" style="width: 200px"   >
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select >
                        </template>
                        <label>内容</label>
                            <el-input v-model="content" placeholder="请输入内容" clearable style="width: 200px" ></el-input>

                        <label>标签</label>
                        <el-input v-model="questionLabel" placeholder="请输入内容" clearable style="width: 200px"></el-input>

                        <el-button plain style="border-radius: 0px;" @click="search">搜索</el-button>
                        <el-button plain style="border-radius: 0px;" @click="clear">清空</el-button>
                    </el-col>
                </el-row>

                <el-row style="top: 10px">
                <el-col :lg="18">
                    <!-- 上部条件选项框 end-->
                    <template>
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column
                                    prop="content"
                                    label="内容"
                                    width="400">
                            </el-table-column>
                            <el-table-column
                                    prop="label.name"
                                    label="试题标签"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="creator"
                                    label="创建人"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="createDate"
                                    label="创建时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="100">
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    <el-button type="text" size="small">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    </el-col>
                <el-col :span="10" :lg="10">
                    <div class="block" style="position: relative; left: 50%;">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[5, 10, 50, 100, 200]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </el-col>
                </el-row>
            </el-card>
    </el-row>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            options:[{
                value: '1',
                label: '单选题'
            }, {
                value: '2',
                label: '多选题'
            }, {
                value: '3',
                label: '判断题'
            }, {
                value: '4',
                label: '填空题'
            }, {
                value: '5',
                label: '简答题'
            }],
            typeValue:"1",
            content:"",
            questionLabel:"",
            tableData: [],
            currentPage:1,
            pageSize:10,
            total:0,
        },
        mounted() {
            axios.get("/sc/allByPage").then(res=>{
                console.log(res);
                this.tableData=res.data.data.list;
                this.total=res.data.data.total;
            })
        },
        methods:{
            search(){
                this.currentPage=1;
                let param = new URLSearchParams();
                switch (this.typeValue) {
                    case "1":
                        param.append("content",this.content);
                        param.append("pageNum",this.currentPage);
                        param.append("pageSize",this.pageSize);
                        axios.post("/sc/caps",param).then(res=>{
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                    case "2":
                        param.append("content",this.content);
                        param.append("pageNum",this.currentPage);
                        param.append("pageSize",this.pageSize);
                        axios.post("/mc/caps",param).then(res=>{
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                    case "3":
                        param.append("content",this.content);
                        param.append("pageNum",this.currentPage);
                        param.append("pageSize",this.pageSize);
                        axios.post("/tof/caps",param).then(res=>{
                            console.log(res)
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                    case "4":
                        param.append("content",this.content);
                        param.append("pageNum",this.currentPage);
                        param.append("pageSize",this.pageSize);
                        axios.post("/bf/caps",param).then(res=>{
                            console.log(res.data)
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                    case "5":
                        param.append("content",this.content);
                        param.append("pageNum",this.currentPage);
                        param.append("pageSize",this.pageSize);
                        axios.post("/sa/caps",param).then(res=>{
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                }
            },
            clear(){
                this.content="";
                this.questionLabel="";
            },
            handleClick(row) {
                console.log(row);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage=1;
                this.pageSize=val;
                let param = new URLSearchParams();
                switch (this.typeValue) {
                    case "1":
                        param.append("content",this.content);
                        param.append("pageNum",this.currentPage);
                        param.append("pageSize",val);
                        axios.post("/sc/caps",param).then(res=>{
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                    case "2":
                        param.append("content",this.content);
                        param.append("pageNum",this.currentPage);
                        param.append("pageSize",val);
                        axios.post("/mc/caps",param).then(res=>{
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                    case "3":
                        param.append("content",this.content);
                        param.append("pageNum",this.currentPage);
                        param.append("pageSize",val);
                        axios.post("/tof/caps",param).then(res=>{
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                    case "4":
                        param.append("content",this.content);
                        param.append("pageNum",this.currentPage);
                        param.append("pageSize",val);
                        axios.post("/bf/caps",param).then(res=>{
                            console.log(res.data)
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                    case "5":
                        param.append("content",this.content);
                        param.append("pageNum",this.currentPage);
                        param.append("pageSize",val);
                        axios.post("/sa/caps",param).then(res=>{
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                }

            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                let param = new URLSearchParams();
                switch (this.typeValue) {
                    case "1":
                        param.append("content",this.content);
                        param.append("pageNum",val);
                        param.append("pageSize",this.pageSize);
                        axios.post("/sc/caps",param).then(res=>{
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                    case "2":
                        param.append("content",this.content);
                        param.append("pageNum",val);
                        param.append("pageSize",this.pageSize);
                        axios.post("/mc/caps",param).then(res=>{
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                    case "3":
                        param.append("content",this.content);
                        param.append("pageNum",val);
                        param.append("pageSize",this.pageSize);
                        axios.post("/tof/caps",param).then(res=>{
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                    case "4":
                        param.append("content",this.content);
                        param.append("pageNum",val);
                        param.append("pageSize",this.pageSize);
                        axios.post("/bf/caps",param).then(res=>{
                            console.log(res.data)
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                    case "5":
                        param.append("content",this.content);
                        param.append("pageNum",val);
                        param.append("pageSize",this.pageSize);
                        axios.post("/sa/caps",param).then(res=>{
                            this.tableData=res.data.data.list;
                            this.total=res.data.data.total;
                        })
                        break;
                }
            }
        }
    })
</script>
</body>
</html>